<template>
  <div class="w-full h-[94%] py-[2%] overflow-y-hidden">
    <div class="w-1/3 h-full flex flex-col float-left px-[6%]">
      <div class="flex bgi items-center px-[4%]">
        <img :src="search" class="w-[1vw] h-[1vw] mr-[2%]" alt="" />
        <!-- <v-autocomplete
          :custom-filter="customFilter"
          :items="states"
          item-title="name"
          item-value="abbr"
          label="中招国际"
          variant="underlined"
          class="h-full text-[1vw]"
        ></v-autocomplete> -->
        <el-tree-select
          v-model="deptId"
          :data="companyList"
          :render-after-expand="false"
          class="searchInput"
          default-expand-all
          suffix-icon="CaretBottom"
          node-key="id"
          :props="{}"
          check-strictly
        >
          <template #prefix>
            <el-icon><Search /></el-icon> </template
        ></el-tree-select>
      </div>
      <div class="flex-1 flex flex-col">
        <div class="flex-1 bg1 relative pt-[9%] pl-[12%]">
          <img
            :src="circle"
            alt=""
            class="w-[1.4vw] h-[1.4vw] absolute top-5 left-3"
          />
          <p class="text-[#A6A6A6] text-[0.7vw] mb-8">
            上年同期营收：{{ treeLData[1]?.lastTotalRevenue }}万元
          </p>
          <p class="text-white text-[1.3vw] font-bold">本年累计营业收入</p>
          <p class="text-white text-[1.5vw] font-bold">
            <span>{{ treeLData[1]?.currentTotalRevenue }}</span>
            <span class="text-[0.8vw] ml-2">万元</span>
          </p>
          <div
            class="bg4 w-[4vw] h-[4vw] absolute bottom-4 right-4 text-center py-[5%]"
          >
            <p
              class="text-[0.7vw] mb-0"
              :class="
                Number(treeLData[1]?.changeRate) > 0
                  ? `text-[#FE718E]`
                  : `text-[#1BD8BA]`
              "
            >
              {{ Number(treeLData[1]?.changeRate) > 0 ? "+" : ""
              }}{{ Number(treeLData[1]?.changeRate).toFixed(2) }}%
            </p>
            <p class="text-[0.6vw] mb-0 text-white">变化率</p>
          </div>
        </div>
        <div class="flex-1 bg1 relative px-[7%] pt-[8%] pb-[5%] flex flex-col">
          <p class="text-[#FFFFFF] text-[0.7vw] mb-2">本年分项营收</p>
          <table class="text-white text-[0.7vw] w-full flex-1">
            <tr class="text-[#BDBDBD]">
              <th class="w-[32%] text-center ">类目</th>
              <th class="w-[20%] text-center">本年累计</th>
              <th class="w-[20%] text-center">上年同期</th>
              <th class="w-[28%] text-center">变化率</th>
            </tr>
            <tr v-for="(item, index) in treeLData[2]" :key="item.revenueType">
              <td class="text-left">
                <span
                  class="w-[4px] h-[4px] rounded-full inline-block mr-1"
                  :style="{ backgroundColor: colors[index] }"
                ></span
                >{{ item.revenueType }}
              </td>

              <td class="text-center">
                {{
                  item.currentTotalRevenue &&
                  Math.round(item.currentTotalRevenue * 100) / 100
                }}
              </td>
              <td class="text-center">
                {{
                  item.lastTotalRevenue &&
                  Math.round(item.lastTotalRevenue * 100) / 100
                }}
              </td>
              <td
                class="text-start"
                :class="`text-[${
                  Number(item.changeRate) > 0 ? '#FE718E' : '#1BD8BA'
                }]`"
              >
                <VIcon
                  v-if="Number(item?.changeRate) < 0"
                  size="18"
                  icon="tabler-caret-down"
                  class="align-middle"
                />
                <VIcon
                  v-else
                  size="18"
                  icon="tabler-caret-up"
                  class="align-middle"
                />
                {{ Number(item?.changeRate) > 0 ? "+" : ""
                }}{{ Number(item?.changeRate).toFixed(2) }}%
              </td>
            </tr>
          </table>
        </div>
        <div class="flex-1 bg2 relative pt-[9%] pl-[12%]">
          <img
            :src="circle"
            alt=""
            class="w-[1.4vw] h-[1.4vw] absolute top-5 left-3"
          />
          <p class="text-[#A6A6A6] text-[0.7vw] mb-6 !leading-5">
            上年同期成本：<br />{{ treeLData[3]?.lastTotalCost }}万元
          </p>
          <p
            class="text-white text-[1.3vw] mb-[0.7vw] font-bold text-[#E0E0E0]"
          >
            本年累计营业成本
          </p>
          <p class="text-white text-[1.5vw] font-bold">
            <span>{{ treeLData[3]?.currentTotalCost }}</span>
            <span class="text-[0.8vw] ml-2">万元</span>
          </p>
          <div
            class="bg4 w-[4vw] h-[4vw] absolute bottom-4 right-4 text-center py-[5%]"
          >
            <p
              class="text-[0.7vw] mb-0 text-[#FE718E]"
              :class="`text-[${
                Number(treeLData[3]?.changeRate) > 0 ? '#FE718E' : '#1BD8BA'
              }]`"
            >
              {{ Number(treeLData[3]?.changeRate) > 0 ? "+" : ""
              }}{{ Number(treeLData[3]?.changeRate).toFixed(2) }}%
            </p>
            <p class="text-[0.6vw] mb-0 text-white">变化率</p>
          </div>
        </div>
        <div class="flex-1 bg1 relative pt-[15%] pl-[12%] pr-[12%]">
          <img
            :src="circle"
            alt=""
            class="w-[1.4vw] h-[1.4vw] absolute top-5 left-3"
          />
          <p class="text-white text-[1.5vw] font-bold text-[#E0E0E0]">
            本年累计营业毛利
          </p>
          <p class="text-white text-[2vw] font-bold">
            <span>{{ treeLData[4] }}</span>
            <span class="text-[0.8vw] ml-2">万元</span>
          </p>
        </div>
      </div>
    </div>
    <div class="w-2/3 h-full flex flex-col float-left pr-[3%]">
      <div
        class="flex-1 pt-[1%] pb-[0.5%] box-border flex flex-col pr-[3%] relative"
      >
        <div
          class="bg5 absolute -top-[6%] right-0 w-[18vw] h-[6vw] pl-[5%] py-[1%] z-10"
        >
          <p><img :src="jb" alt="" class="w-[47%] float-right" /></p>
          <p class="text-white text-[0.8vw] mt-[15%] mb-0 whitespace-nowrap">
            {{ briefData?.briefingName }}
          </p>
          <p class="text-right mb-2 pr-[16%]">
            <span
              class="p-1 bg-[#000000] text-[#DBDBDB] text-[0.7vw] cursor-pointer"
              @click="dialogVisible = true; getBriefingDetail(briefData?.briefingId)"
              >查看详情</span
            >
          </p>
          <div
            v-if="dialogVisible"
            class="bgm absolute top-[5vw] -right-[2vw] w-[40vw] h-[40vw] px-[28%] py-[9%] pb-[15%] flex flex-col"
          >
            <div
              class="w-[5%] h-[5%] absolute top-0 right-0 cursor-pointer"
              @click="dialogVisible = false"
            ></div>
            <!-- <p class="flex justify-center">
              <span class="text-[1vw] max-w-[40%] h-[1vw] mt-[0.6vw] v-select__selection-text">{{select.state}}</span>
              <v-select
                class="text-[1vw] max-w-[40%] h-[1vw]"
                v-model="select"
                :items="items"
                item-title="state"
                item-value="abbr"
                label="Select"
                variant="plain"
                persistent-hint
                return-object
                single-line
              ></v-select>
            </p> -->
            <div class="flex-1 overflow-auto">
              <p v-html="briefDataDetail" class="mb-0 !pt-[0.4vw] ql-editor !leading-[2]"></p>
              <!-- <p
                class="text-[1.1vw] mt-[2%] mb-[7%] text-center text-[#89ADF3]"
              >
                （第一期）
              </p>
              <p v-html="briefDataDetail" class="text-[0.9vw] text-[#89ADF3] leading-[2]"></p> -->
              <!-- <p class="text-[0.9vw] text-[#89ADF3] leading-[2]">
                一、总体情况<br />
                截至2024年**月，中招国际累计实现营业收入**万元，同比增加**万元。<br />
                截至2024年**月，中招国际累计实现利润总额**万元，受成本费用累计增加**万元，以及资金收益同比减少**万元影响，利润总额同比减少**万元。<br />
                二、重点领域流程检查<br />
                结合关注重点，本月选取招标协作费、业务招待费、专家劳务费三项费用，进行常规流程穿行检查，检查重点包括招标协作合作单位有无不诚信记录、协作费比例是否合规，业务招待费发票是否存在连号、节假日情况等，未见异常。<br />
                三、大额支出检查<br />
                本月抽查100万以上大额支出，了解大额支出性质、内容等情况，未见异常。<br />
                四、总结<br />
                现阶段为“穿透式”财务监管工作起步阶段，应关注大额费用支出情况，以及重要费用标准（如招标协作费、专家费）执行情况。
              </p> -->
            </div>
          </div>
        </div>
        <div class="w-full flex items-center">
          <img :src="t1" alt="" class="w-4 mr-4 h-[80%]" />
          <span class="text-[1.4vw] text-white font-bold">营业收入统计</span>
          <span class="text-[#c3d1db] text-base ml-20 mt-1">{{
            barT?.deadline
          }}</span>
        </div>
        <div class="flex-1">
          <BarChart
            :height="`100%`"
            :chart-data="data"
            :chart-options="chartOptions1"
          />
        </div>
      </div>
      <div class="flex-1 w-full bg3 py-[3.5%] box-border flex flex-col">
        <div class="w-full flex items-center">
          <img :src="t1" alt="" class="w-4 h-[80%] mr-4" />
          <span class="text-[1.4vw] text-white font-bold">营业成本统计</span>
        </div>
        <div class="w-full flex-1">
          <div class="w-[40%] float-left p-4 h-full">
            <div class="h-full">
              <DoughnutChart
                v-if="pieData?.length"
                ref="Doughnut"
                :height="`100%`"
                :chart-data="circledata"
                :chart-options="circleOptions"
                :plugins="[ChartDataLabels]"
              />
            </div>
          </div>
          <div class="w-[60%] float-left p-4 h-full relative">
            <div class="absolute right-0 -top-[10%] flex">
              <div class="flex mr-4">
                <div class="w-[2.5vw] h-[2.5vw] relative bg6 mr-2"></div>
                <div class="flex-1">
                  <p class="text-[0.6vw] text-[#BDBDBD] mb-0">
                    本年成本费用收入比
                  </p>
                  <p class="text-[1.2vw] font-bold text-white mb-0">
                    {{ ratios?.currentCostRevenueRatio }}
                  </p>
                </div>
              </div>
              {{ radios }}
              <div class="flex mr-4">
                <div class="w-[2.5vw] h-[2.5vw] relative bg7 mr-2"></div>
                <div class="flex-1">
                  <p class="text-[0.6vw] text-[#BDBDBD] mb-0">
                    上年成本费用收入比
                  </p>
                  <p class="text-[1.2vw] font-bold text-white mb-0">
                    {{ ratios?.lastCostRevenueRatio }}
                  </p>
                </div>
              </div>
            </div>
            <div class="h-full pt-[3%]">
              <BarChart
                :height="`100%`"
                :chart-data="dataB1"
                :chart-options="chartOptions2"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import circle from "@/assets/images/screen/circle.png";
import jb from "@/assets/images/screen/jb.png";
import search from "@/assets/images/screen/search.png";
import t1 from "@/assets/images/screen/t1.png";
import {
  getDoughnutChartConfig,
  getLatestBarChartConfig,
} from "@core/libs/chartjs/chartjsConfig";
import BarChart from "@core/libs/chartjs/components/BarChart";
import DoughnutChart from "@core/libs/chartjs/components/DoughnutChart";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { ref, watchEffect } from "vue";
import { useTheme } from "vuetify";
import { useHome } from "./composables/useHome";
const {
  barChart,
  tabname,
  getDeptTree,
  companyList,
  getTotalData,
  treeLData,
  getBriefData,
  briefData,
  getPieData,
  pieData,
  Doughnut,
  revenueStatisticsData,
  barT,
  costStatisticsByPillarData,
  barB,
  costRevenueRatioData,
  ratios,
  transData,
  getBriefingDetail,
  briefDataDetail
} = useHome();
getDeptTree();
getBriefData();

definePage({
  meta: {
    layout: "blank",
    public: true,
  },
});
const T = ref();
const B = ref();
const deptId = ref();
watchEffect(() => {
  deptId.value = companyList.value[0]?.id;
});
const colors = ["#2A82E4", "#8744E1", "#FE718E", "#FBBA6D"];
const select = ref({ state: "“穿透式”财务监管8月简报", abbr: "FL" });
const items = ref([
  { state: "“穿透式”财务监管8月简报", abbr: "FL" },
  { state: "Georgia", abbr: "GA" },
  { state: "Nebraska", abbr: "NE" },
  { state: "California", abbr: "CA" },
  { state: "New York", abbr: "NY" },
]);
const dialogVisible = ref(false);
watch(deptId, (newVal) => {
  if (newVal) {
    getTotalData(newVal);
    getPieData(newVal);
    revenueStatisticsData(newVal);
    costStatisticsByPillarData(newVal);
    costRevenueRatioData(newVal);
  }
});

const emits = defineEmits(["toStatistics"]);
const vuetifyTheme = useTheme();
const chartOptions = computed(() =>
  getLatestBarChartConfig(vuetifyTheme.current.value)
);
const chartOptions1 = {
  ...chartOptions.value,
  scales: {
    y: {
      min: 0,
      grid: {
        drawTicks: false,
        drawBorder: false,
        color: "#BDBDBD",
      },
      ticks: { color: "#BDBDBD" },
    },
    x: {
      grid: {
        borderColor: "#BDBDBD",
        display: false,
        drawBorder: false,
      },
      ticks: { color: "#BDBDBD" },
    },
  },
  plugins: {
    legend: {
      display: true,
      position: "top",
      align: "center",
      labels: {
        usePointStyle: true,
        pointStyle: "rectRounded",
        font: {
          family: "Arial", // 设置字体为Arial
          size: 12, // 设置字体大小为14
          style: "bold", // 设置字体样式为粗体
          lineHeight: 1.2, // 设置行高为1.2
        },
        color: "#FFFFFF",
      },
    },
    tooltip: {
      callbacks: {
        title: function (context) {
          return "";
        },
        label: function (context) {
          let label = context.dataset.label || "";
          if (context.datasetIndex === 0) {
            return `该月收入${Number(context.raw).toFixed(2)}万元，同比变化率${
              Number(barT.value?.list[context.dataIndex]?.changeRate).toFixed(2)
            }%`;
          } else {
            return `上年该月收入${Number(context.raw).toFixed(2)}万元`;
          }
        },
      },
    },
  },
  onClick: function (e) {
    const item = e.chart._active[0];
    if (item) {
      const list = barT.value?.list[item.index];
      transData.value = {
        deptId: deptId.value,
        year: item.datasetIndex === 0 ? list.year : list.lastYear,
        month: list.month,
      };
      tabname.value = "yysrtj";
    }
  },
};
const chartOptions2 = {
  ...chartOptions.value,
  scales: {
    y: {
      min: 0,
      grid: {
        drawTicks: false,
        drawBorder: false,
        color: "#BDBDBD",
      },
      ticks: { color: "#BDBDBD" },
    },
    x: {
      grid: {
        borderColor: "#BDBDBD",
        display: false,
        drawBorder: false,
      },
      ticks: { color: "#BDBDBD" },
    },
  },
  plugins: {
    legend: {
      display: false,
      position: "top",
      align: "end",
      labels: {
        usePointStyle: true,
        font: {
          family: "Arial", // 设置字体为Arial
          size: 12, // 设置字体大小为14
          style: "bold", // 设置字体样式为粗体
          lineHeight: 1.2, // 设置行高为1.2
        },
        color: "#FFFFFF",
      },
    },
    tooltip: {
      callbacks: {
        title: function (context) {
          return "";
        },
        label: function (context) {
          let label = context.dataset.label || "";
          if (context.datasetIndex === 0) {
            return `该月成本${Number(context.raw).toFixed(2)}万元，同比变化率${
              Number(barB.value?.list[context.dataIndex]?.changeRate).toFixed(2)
            }%`;
          } else {
            return `上年该月成本${Number(context.raw).toFixed(2)}万元`;
          }
        },
      },
    },
  },
  onClick: function (e) {
    const item = e.chart._active[0];
    if (item) {
      const list = barB.value?.list[item.index];
      transData.value = {
        deptId: deptId.value,
        year: item.datasetIndex === 0 ? list.year : list.lastYear,
        month: list.month,
      };
      tabname.value = "yycbtj";
    }
  },
};
const chartCircleOptions = computed(() => getDoughnutChartConfig());
const lastCost = ref()
const circleOptions = {
  ...chartCircleOptions.value,
  cutout: "70",
  plugins: {
    legend: {
      display: true,
      position: "left",
      labels: {
        usePointStyle: true,
        font: {
          family: "Arial", // 设置字体为Arial
          size: 10, // 设置字体大小为14
          style: "bold", // 设置字体样式为粗体
          lineHeight: 1.2, // 设置行高为1.2
        },
        color: "#FFFFFF",
      },
    },
    datalabels: {
      formatter: (value, ctx) => {
        // let sum = 0;
        // let dataArr = ctx.chart.data.datasets[0].data;
        // dataArr.map(data => {
        //     sum += data;
        // });
        // let percentage = (value * 100 / sum).toFixed(2) + "%";
        // return percentage;
        return value;
      },
      color: "#000",
      font: {
        // weight: 'bold',
        size: 14,
      },
      anchor: "center",
      align: "middle",
    },
    tooltip: {
      callbacks: {
        title: function (context) {
          return "";
        },
        label: function (context) {
          let label = context.dataset.label || ""
          return `${pieData.value[context.dataIndex]?.amountStr}，${
            pieData.value[context.dataIndex]?.rate
          }，${pieData.value[context.dataIndex]?.changeRate}`
        },
      },
    }
  },
  onClick: function (e) {
    const item = e.chart._active[0];
    const list = pieData.value;
    let costType = list[item.index].costType;
    if(lastCost.value != costType) {
      costStatisticsByPillarData(deptId.value + `?costType=${costType}`);
      lastCost.value = costType
    } else {
      costStatisticsByPillarData(deptId.value);
      lastCost.value = ''
    }
  },
};

const data = ref();
watchEffect(() => {
  data.value = {
    labels: barT.value?.list.map((item) => item.yearAndMonth),
    datasets: [
      {
        maxBarThickness: 15,
        backgroundColor: ["#FBBA6D"],
        borderColor: "transparent",
        borderRadius: {
          topRight: 3,
          topLeft: 3,
        },
        label: "本年数",
        data: barT.value?.list.map((item) => item.currentTotal),
      },
      {
        maxBarThickness: 15,
        backgroundColor: ["#2A82E4"],
        borderColor: "transparent",
        borderRadius: {
          topRight: 3,
          topLeft: 3,
        },
        label: "上年数",
        data: barT.value?.list.map((item) => item.lastTotal),
      },
    ],
  };
});
const dataB1 = ref();
watchEffect(() => {
  dataB1.value = {
    labels: barB.value?.list.map((item) => item.yearAndMonth),
    datasets: [
      {
        maxBarThickness: 15,
        backgroundColor: ["#FBBA6D"],
        borderColor: "transparent",
        borderRadius: {
          topRight: 3,
          topLeft: 3,
        },
        label: "本年数",
        data: barB.value?.list.map((item) => item.currentTotal),
      },
      {
        maxBarThickness: 15,
        backgroundColor: ["#2A82E4"],
        borderColor: "transparent",
        borderRadius: {
          topRight: 3,
          topLeft: 3,
        },
        label: "上年数",
        data: barB.value?.list.map((item) => item.lastTotal),
      },
    ],
  };
});
const circledata = ref();
watchEffect(() => {
  circledata.value = {
    labels: pieData.value?.map((item) => item.costTypeName) ?? [],
    datasets: [
      {
        maxBarThickness: 15,
        backgroundColor: [
          "#F47560",
          "#E33C64",
          "#E8C1A0",
          "#E8A838",
          "#02A314",
          "#9F07BA",
          "#E8EB36",
          "#43CF7C",
          "#7948EA",
          "#61CDBB",
        ],
        borderColor: "transparent",
        borderRadius: {
          topRight: 15,
          topLeft: 15,
        },
        data:
          pieData.value?.map((item) => Number(item.amount).toFixed(2)) ?? [],
      },
    ],
  };
});

const to = (type) => {
  emits("toStatistics", type);
};
const customFilter = (itemTitle, queryText, item) => {
  const textOne = item.raw.name.toLowerCase();
  const textTwo = item.raw.abbr.toLowerCase();
  const searchText = queryText.toLowerCase();

  return textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1;
};
const states = ref([
  { name: "Florida", abbr: "FL", id: 1 },
  { name: "Georgia", abbr: "GA", id: 2 },
  { name: "Nebraska", abbr: "NE", id: 3 },
  { name: "California", abbr: "CA", id: 4 },
  { name: "New York", abbr: "NY", id: 5 },
]);
</script>
 
<style lang="scss" scoped >
@use "@core/scss/template/libs/apex-chart.scss";
.bg1 {
  background: url("@/assets/images/screen/l-bg1.png") no-repeat;
  background-size: 100% 100%;
}
.bg2 {
  background: url("@/assets/images/screen/l-bg2.png") no-repeat;
  background-size: 100% 100%;
}
.bg3 {
  background: url("@/assets/images/screen/b1.png") no-repeat;
  background-size: 100% 100%;
}
.bg4 {
  background: url("@/assets/images/screen/l1.png") no-repeat;
  background-size: 100% 100%;
}
.bg5 {
  background: url("@/assets/images/screen/r1.png") no-repeat;
  background-size: 100% 100%;
}
.bg6 {
  background: url("@/assets/images/screen/l-1.png") no-repeat;
  background-size: 200% 200%;
  background-size: 400% 400%;
  background-position: 49% 53%;
}
.bg7 {
  background: url("@/assets/images/screen/l-2.png") no-repeat;
  background-size: 200% 200%;
  background-size: 400% 400%;
  background-position: 49% 53%;
}
.bgi {
  background: linear-gradient(
    90deg,
    #16162c 0%,
    #003355 45.14%,
    #16162c 84.04%
  );
}
.bgm {
  background: url("@/assets/images/screen/mask.png") no-repeat;
  background-size: 100% 100%;
}
:deep(.v-input__control) {
  height: 2.4vw;
}
:deep(.v-field__input) {
  height: 100%;
  font-size: 1vw !important;
}
:deep(.not(.v-field--active) .v-field-label) {
  font-size: 1vw !important;
  font-weight: bold;
}
:deep(.v-select__selection-text) {
  font-size: 0.8vw;
  color: #00fff4;
  font-weight: 700;
}
:deep(.el-select__suffix) {
  color: #00fff4 !important;
}
:deep(.el-select__wrapper) {
  background-color: transparent !important;
  box-shadow: none;
}
:deep(.el-select__prefix > i) {
  display: none;
}
:deep(.el-select__placeholder) {
  font-size: 1.2vw;
  color: #bdbdbd;
}
div::-webkit-scrollbar, p::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
/* 针对Firefox的隐藏滚动条的样式 */
div, p {
    scrollbar-width: none; /* Firefox */
}
</style>
